<!--
 * @Description: 缺陷信息列表
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 16:00:44
 * @LastEditTime: 2021-10-15 17:21:22
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="app-container v-flex JCWWTKInformation">
    <!-- 顶部操作栏 -->
    <filter-form :form="listQuery" :data="filterData" only-query @search="search">
      <el-button class="refresh-btn" size="mini" type="primary" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
    </filter-form>
    <!-- 顶部操作栏 -->

    <div class="content">
      <!-- 标题栏 -->
      <div class="content-header">
        <div class="content-header-vertical-bar" />
        <span class="content-header-title">缺陷信息</span>
        <div :class="listQuery.countMessage === '' ? 'content-msg-active' : 'content-msg'" @click="listQuery.countMessage = ''; search()">
          缺陷总数 <span>{{ countData.total?countData.total:0 }}</span> 条
        </div>
        <div :class="listQuery.countMessage === 'notReformCount' ? 'content-msg-active' : 'content-msg'" @click="listQuery.countMessage = 'notReformCount'; search()">
          未销号 <span>{{ countData.notReformCount?countData.notReformCount:0 }}</span> 条
        </div>
        <div :class="listQuery.countMessage === 'overDateCount' ? 'content-msg-active' : 'content-msg'" @click="listQuery.countMessage = 'overDateCount'; search()">
          超期未处理 <span>{{ countData.overDateCount?countData.overDateCount:0 }}</span> 条
        </div>
        <div :class="listQuery.countMessage === 'reformCount' ? 'content-msg-active' : 'content-msg'" @click="listQuery.countMessage = 'reformCount'; search()">
          已销号 <span>{{ countData.reformCount?countData.reformCount:0 }}</span> 条
        </div>
        <div class="operation-btn-div">
          <el-button
            v-permission-button="'ITPS-ADD'"
            class="operation-btn"
            icon="el-icon-plus"
            @click="addForm">新增</el-button>
          <el-upload
            style="display:inline-block;margin: 0 6px;"
            accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :action="action"
            :show-file-list="false"
            :before-upload="beforeUpload">
            <el-button
              size="mini"
              class="operation-btn"
              icon="el-icon-upload2">
              导入
            </el-button>
          </el-upload>
        </div>
      </div>
      <!-- 标题栏 -->
    </div>

    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic defect-information">
      <base-table
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor">
        <template slot="listStatus" slot-scope="{ row }">
          <el-tooltip v-if="row.listStatus === 3" effect="dark" content="已过提醒日期，未过超期日期" placement="top">
            <div class="remain-color">{{ row.listStatus === 1 ? '已销号' : '未销号' }}</div>
          </el-tooltip>
          <el-tooltip v-else-if="row.listStatus === 4" effect="dark" content="已过超期日期" placement="top">
            <div class="overtime-color">{{ row.listStatus === 1 ? '已销号' : '未销号' }}</div>
          </el-tooltip>
          <div v-else style="padding: 5px 10px;">{{ row.listStatus === 1 ? '已销号' : '未销号' }}</div>
        </template>
        <template slot="operations" slot-scope="{ row, $index }">
          <el-button
            v-permission-button="'ITPS-VIEW'"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-view"
            @click="view(row, $index)" />
          <el-button
            v-permission-button="'ITPS-UPDATE'"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-edit"
            :disabled="row.listStatus==1"
            @click="updateForm(row, $index)" />
          <el-button
            v-permission-button="'ITPS-DELETE'"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-delete"
            :disabled="row.listStatus==1"
            @click="deleteData(row, $index)" />
          <el-button
            size="mini"
            class="td-btn-operation"
            :disabled="row.listStatus==1"
            @click.native="handleCancelNumber(row, $index)">销号</el-button>
        </template>
      </base-table>
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getListPage" />
    </div>
    <!-- 分页 -->

    <!-- 查看缺陷信息弹框组件 -->
    <look-data-dialog :dialog="lookDialog" />
    <!-- 查看缺陷信息弹框组件 -->

    <!-- 新增/编辑缺陷信息弹框组件 -->
    <data-add-or-edit
      :dialog="dialog"
      @updateData="updateData" />
    <!-- 新增/编辑缺陷信息弹框组件 -->

    <!-- 销号信息弹框组件 -->
    <data-cancel-number
      :dialog="cancelDialog"
      @updateData="updateDataOfCancelNumber" />
    <!-- 销号信息弹框组件 -->
  </div>
</template>

<script>
import { getListPage, deleteData, getCount, upload } from '@/api/jcwwtk/information'
import { findManageDeptTree, getSeclineTree, getLineSiteList, getDirectionList, getTrackList, getTunnelList } from '@/api/basic-data/common'
import { findManageUnitDeptList } from '@/api/main'
import { getListPage as getPositionList } from '@/api/jcwwtk/position'
import { getListPage as getSourceList } from '@/api/jcwwtk/source'
import { getListPage as getGradeList } from '@/api/jcwwtk/grade'
import { getListPage as getClassifyList } from '@/api/jcwwtk/classify'
import { getListPage as getCauseList } from '@/api/jcwwtk/cause'
import { tableMixin } from '@/utils/public'
import LookDataDialog from './components/LookDataDialog'
import DataAddOrEdit from './components/DataAddOrEdit'
import DataCancelNumber from './components/DataCancelNumber'

export default {
  name: 'JCWWTKInformation',
  components: {
    LookDataDialog,
    DataAddOrEdit,
    DataCancelNumber
  },
  mixins: [tableMixin],
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + '/dfile/file/upload',
      // 满足六个段接口请求标识
      unitCodeParams: '',

      // 表格高度
      height: 0,

      // 顶部操作栏配置
      filterData: {
        unitDeptCode: {
          key: 'unitDeptCode',
          type: 'select',
          title: '单位',
          placeholder: '所有单位',
          options: [],
          clearable: false,
          props: { label: 'deptName', value: 'mCode' },
          changeFn: (vm) => {
            if (vm) {
              const data = this.filterData['unitDeptCode'].options.find(item => item.unitDeptCode === vm)
              this.unitCodeParams = data.itemName
              this.filterData['positionName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
              this.filterData['defectGradeName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
              this.filterData['defectTypeName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
              this.filterData['defectReasonName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
              this.tableData.tableList = []
              this.listQuery = {
                page: 1,
                size: 20,
                unitDeptCode: data.unitDeptCode,
                deptCode: '',
                railType: '',
                lineId: '',
                lineSiteId: '',
                directionId: '',
                trackId: '',
                tunnelId: '',
                pillarNum: '',
                status: '',
                defectPositionId: '',
                positionName: '',
                defectOriginId: '',
                defectLevelId: '',
                defectGradeName: '',
                defectCategoryId: '',
                defectTypeName: '',
                defectReasonId: '',
                defectReasonName: '',
                findDate: [],
                findStartDate: '',
                findEndDate: '',
                handleDate: [],
                handleStartDate: '',
                handleEndDate: '',
                unitCodeParams: data.itemName
              }
              this.getList() // 加载下拉信息列表
              this.getListPage() // 查询列表信息
            }
          }
        },
        deptCode: {
          width: '160px',
          key: 'deptCode',
          type: 'selectTree',
          title: '部门',
          placeholder: '部门',
          options: [],
          props: {
            label: 'label',
            value: 'code',
            parent: 'parentId',
            children: 'children'
          }
        },
        railType: {
          width: '160px',
          key: 'railType',
          type: 'select',
          title: '铁路类型',
          placeholder: '铁路类型',
          options: [
            { name: '普铁', value: 'PT' },
            { name: '高铁', value: 'GT' }
          ],
          props: { label: 'name', value: 'value' },
          changeFn: (vm) => {
            this.listQuery.lineId = ''
            this.filterData['lineId'].options = []
            this.listQuery.lineSiteId = ''
            this.filterData['lineSiteId'].options = []
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
            if (vm !== '') {
              // 查询线路树信息列表
              getSeclineTree({
                railType: vm,
                unitCodeParams: this.unitCodeParams
              }).then(response => {
                this.filterData['lineId'].options = response.data
              })
            } else {
              // 查询线路树信息列表
              getSeclineTree({ unitCodeParams: this.unitCodeParams }).then(response => {
                this.filterData['lineId'].options = response.data
              })
            }
          }
        },
        lineId: {
          width: '160px',
          key: 'lineId',
          type: 'selectTree',
          title: '线路',
          placeholder: '线路',
          options: [],
          props: {
            label: 'label',
            value: 'id',
            parent: 'parentId',
            children: 'children'
          },
          changeFn: (vm, node) => {
            this.listQuery.lineSiteId = ''
            this.filterData['lineSiteId'].options = []
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
            // 查询区间站场信息列表
            getLineSiteList({
              seclineId: node.id,
              unitCodeParams: this.unitCodeParams
            }).then(response => {
              this.filterData['lineSiteId'].options = response.data
            })
          },
          clearFn: () => {
            this.listQuery.lineSiteId = ''
            this.filterData['lineSiteId'].options = []
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
          }
        },
        lineSiteId: {
          width: '160px',
          key: 'lineSiteId',
          type: 'select',
          title: '区站',
          placeholder: '区站',
          options: [],
          props: {
            label: 'siteName',
            value: 'siteId'
          },
          changeFn: (vm, node) => {
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
            // 查询股道信息列表
            getTrackList({
              unitCodeParams: this.unitCodeParams,
              siteId: vm
            }).then(response => {
              this.filterData['trackId'].options = response.data
              this.filterData['trackId'].options.unshift({ trackName: '非股道', trackId: 'NotTrack' })
            })
            // 查询隧道信息列表
            getTunnelList({
              unitCodeParams: this.unitCodeParams,
              siteId: vm
            }).then(response => {
              this.filterData['tunnelId'].options = response.data
              this.filterData['tunnelId'].options.unshift({ tunnelName: '非隧道', tunnelId: 'NotTunnel' })
            })
          },
          clearFn: () => {
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
          }
        },
        directionId: {
          width: '160px',
          key: 'directionId',
          type: 'select',
          title: '行别',
          placeholder: '行别',
          options: [],
          props: {
            label: 'directionName',
            value: 'directionId'
          }
        },
        trackId: {
          width: '160px',
          key: 'trackId',
          type: 'select',
          title: '股道',
          placeholder: '股道',
          options: [],
          props: { label: 'trackName', value: 'trackId' }
        },
        tunnelId: {
          width: '160px',
          key: 'tunnelId',
          type: 'select',
          title: '隧道',
          placeholder: '隧道',
          options: [],
          props: { label: 'tunnelName', value: 'tunnelId' }
        },
        pillarNum: {
          width: '160px',
          key: 'pillarNum',
          type: 'input',
          placeholder: '支柱号'
        },
        status: {
          width: '160px',
          key: 'status',
          type: 'select',
          title: '销号情况',
          placeholder: '销号情况',
          options: [
            { name: '未销号', value: 'NO' },
            { name: '已销号', value: 'YES' }
          ],
          props: { label: 'name', value: 'value' }
        },
        positionName: {
          width: '160px',
          key: 'positionName',
          type: 'selectTable',
          title: '缺陷部位',
          placeholder: '缺陷部位',
          selectTableModel: {
            filterForm: {
              page: 1,
              size: 10,
              keyWord: '',
              unitCodeParams: ''
            },
            filterData: {
              keyWord: {
                key: 'keyWord',
                type: 'input',
                placeholder: '名称'
              }
            },
            columns: [
              { property: 'namePath', label: '部位名称' }
            ],
            total: 0,
            filterFn: getPositionList
          },
          options: [],
          // focus: () => {
          //   this.filterData.positionName.selectTableModel.filterForm = {
          //     page: 1,
          //     size: 10,
          //     keyWord: '',
          //     unitCodeParams: this.unitCodeParams
          //   }
          // },
          changeFn: (row) => {
            this.listQuery.defectPositionId = row.defectPositionId
            this.listQuery.positionName = row.positionName
          },
          clearFn: () => {
            this.listQuery.defectPositionId = ''
            this.listQuery.positionName = ''
          }
        },
        defectOriginId: {
          width: '160px',
          key: 'defectOriginId',
          type: 'select',
          title: '检测装置',
          placeholder: '检测装置',
          options: [],
          props: { label: 'sourceTypeName', value: 'sourceTypeId' }
        },
        defectGradeName: {
          width: '160px',
          key: 'defectGradeName',
          type: 'selectTable',
          title: '缺陷等级',
          placeholder: '缺陷等级',
          selectTableModel: {
            filterForm: {
              page: 1,
              size: 10,
              keyWord: '',
              unitCodeParams: ''
            },
            filterData: {
              keyWord: {
                key: 'keyWord',
                type: 'input',
                placeholder: '名称'
              }
            },
            columns: [
              { property: 'defectGradeName', label: '等级名称' },
              { property: 'solveDays', label: '整改期限' },
              { property: 'remindTimeCount', label: '提醒期限' }
            ],
            total: 0,
            filterFn: getGradeList
          },
          options: [],
          // focus: () => {
          //   this.filterData.defectGradeName.selectTableModel.filterForm = {
          //     page: 1,
          //     size: 10,
          //     keyWord: '',
          //     unitCodeParams: this.unitCodeParams
          //   }
          // },
          changeFn: (row) => {
            this.listQuery.defectLevelId = row.defectGradeId
            this.listQuery.defectGradeName = row.defectGradeName
            this.listQuery.defectCategoryId = ''
            this.listQuery.defectTypeName = ''
            this.filterData['defectTypeName'].selectTableModel.filterForm.defectGradeId = row.defectGradeId
            // 查询缺陷分类信息列表
            getClassifyList(this.filterData['defectTypeName'].selectTableModel.filterForm).then((response) => {
              this.filterData['defectTypeName'].options = response.data.records
              this.filterData['defectTypeName'].selectTableModel.total = response.data.total
            })
          },
          clearFn: () => {
            this.listQuery.defectLevelId = ''
            this.listQuery.defectGradeName = ''
            this.listQuery.defectCategoryId = ''
            this.listQuery.defectTypeName = ''
            this.filterData['defectTypeName'].selectTableModel.filterForm.defectGradeId = ''
            // 查询缺陷分类信息列表
            getClassifyList(this.filterData['defectTypeName'].selectTableModel.filterForm).then((response) => {
              this.filterData['defectTypeName'].options = response.data.records
              this.filterData['defectTypeName'].selectTableModel.total = response.data.total
            })
          }
        },
        defectTypeName: {
          width: '160px',
          key: 'defectTypeName',
          type: 'selectTable',
          title: '缺陷分类',
          placeholder: '缺陷分类',
          selectTableModel: {
            filterForm: {
              page: 1,
              size: 10,
              keyWord: '',
              defectGradeId: '',
              unitCodeParams: ''
            },
            filterData: {
              keyWord: {
                key: 'keyWord',
                type: 'input',
                placeholder: '名称'
              }
            },
            columns: [
              { property: 'namePath', label: '分类名称' },
              { property: 'defectGradeName', label: '缺陷等级' }
            ],
            total: 0,
            filterFn: getClassifyList
          },
          options: [],
          // focus: () => {
          //   this.filterData.defectTypeName.selectTableModel.filterForm = {
          //     page: 1,
          //     size: 10,
          //     keyWord: '',
          //     defectGradeId: this.filterData.defectTypeName.selectTableModel.filterForm.defectGradeId,
          //     unitCodeParams: this.unitCodeParams
          //   }
          // },
          changeFn: (row) => {
            this.listQuery.defectCategoryId = row.defectTypeId
            this.listQuery.defectTypeName = row.defectTypeName
          },
          clearFn: () => {
            this.listQuery.defectCategoryId = ''
            this.listQuery.defectTypeName = ''
          }
        },
        defectReasonName: {
          width: '160px',
          key: 'defectReasonName',
          type: 'selectTable',
          title: '缺陷成因',
          placeholder: '缺陷成因',
          selectTableModel: {
            filterForm: {
              page: 1,
              size: 10,
              keyWord: '',
              unitCodeParams: ''
            },
            filterData: {
              keyWord: {
                key: 'keyWord',
                type: 'input',
                placeholder: '名称'
              }
            },
            columns: [
              { property: 'namePath', label: '成因名称' }
            ],
            total: 0,
            filterFn: getCauseList
          },
          options: [],
          // focus: () => {
          //   this.filterData.defectReasonName.selectTableModel.filterForm = {
          //     page: 1,
          //     size: 10,
          //     keyWord: '',
          //     unitCodeParams: this.unitCodeParams
          //   }
          // },
          changeFn: (row) => {
            this.listQuery.defectReasonId = row.defectReasonId
            this.listQuery.defectReasonName = row.defectReasonName
          },
          clearFn: () => {
            this.listQuery.defectReasonId = ''
            this.listQuery.defectReasonName = ''
          }
        },
        findStartDate: {
          key: 'findStartDate',
          type: 'date',
          title: '发现开始日期',
          placeholder: '发现开始日期',
          valueFormat: 'yyyy-MM-dd'
        },
        findEndDate: {
          key: 'findEndDate',
          type: 'date',
          title: '发现结束日期',
          placeholder: '发现结束日期',
          valueFormat: 'yyyy-MM-dd'
        },
        handleStartDate: {
          key: 'handleStartDate',
          type: 'date',
          title: '处理开始日期',
          placeholder: '处理开始日期',
          valueFormat: 'yyyy-MM-dd'
        },
        handleEndDate: {
          key: 'handleEndDate',
          type: 'date',
          title: '处理结束日期',
          placeholder: '处理结束日期',
          valueFormat: 'yyyy-MM-dd'
        }
        // findDate: {
        //   width: 'auto',
        //   key: 'findDate',
        //   type: 'daterange',
        //   dateType: 'daterange',
        //   valueFormat: 'yyyy-MM-dd HH:mm:ss',
        //   placeholderLeft: '发现日期',
        //   placeholderRight: '结束日期'
        // },
        // handleDate: {
        //   width: 'auto',
        //   key: 'handleDate',
        //   type: 'daterange',
        //   dateType: 'daterange',
        //   valueFormat: 'yyyy-MM-dd HH:mm:ss',
        //   placeholderLeft: '处理日期',
        //   placeholderRight: '结束日期'
        // }
      },

      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        unitDeptCode: '',
        deptCode: '',
        railType: '',
        lineId: '',
        lineSiteId: '',
        directionId: '',
        trackId: '',
        tunnelId: '',
        pillarNum: '',
        status: '',
        defectPositionId: '',
        positionName: '',
        defectOriginId: '',
        defectLevelId: '',
        defectGradeName: '',
        defectCategoryId: '',
        defectTypeName: '',
        defectReasonId: '',
        defectReasonName: '',
        findDate: [],
        findStartDate: '',
        findEndDate: '',
        handleDate: [],
        handleStartDate: '',
        handleEndDate: '',
        countMessage: '',
        unitCodeParams: ''
      },

      // 统计栏参数
      countData: {
        total: 0,
        notReformCount: 0,
        overDateCount: 0,
        reformCount: 0
      },

      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { label: '线路', prop: 'seclineName' },
          { label: '区间站场', prop: 'siteName' },
          { label: '行别', prop: 'directionName' },
          { label: '隧道', prop: 'tunnelName' },
          { label: '股道', prop: 'trackName' },
          { label: '支柱号', prop: 'pillarNum' },
          { label: '公里标', prop: 'roadMark', formatter: (row) => this.formatRoad(row.roadMark) },
          { label: '销号情况', prop: 'listStatus', template: true },
          { label: '缺陷分类', prop: 'defectTypeName' },
          { label: '缺陷描述', prop: 'defectInfoDesc' },
          { label: '缺陷等级', prop: 'defectGradeName' },
          // { label: '发现人', prop: 'discoverPerson' },
          { label: '所属工区', prop: 'pillarDeptName' },
          { label: '缺陷部位', prop: 'positionName' },
          { label: '缺陷来源', prop: 'discoverSourceTypeName' },
          { label: '缺陷成因', prop: 'defectReasonName' },
          { label: '发现日期', prop: 'discoverDate' },
          { label: '处理日期', prop: 'rectifDatetime' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '160px',
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 查看信息弹框配置
      lookDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: 'view',
        dataList: {},
        form: {
          id: '',
          unitCodeParams: ''
        }
      },

      // 添加/编辑弹框配置
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: '',
        dataList: {
          directionList: [],
          sourceList: []
        },
        form: {
          id: '',
          unitCodeParams: ''
        },
        rules: {
          seclineId: { required: true, message: '请选择', trigger: 'change' },
          siteId: { required: true, message: '请选择', trigger: 'change' },
          pillarNum: { required: true, message: '请选择', trigger: 'change' },
          discoverPerson: { required: true, message: '请选择', trigger: 'change' },
          discoverSourceTypeId: { required: true, message: '请选择', trigger: 'change' },
          defectTypeName: { required: true, message: '请选择', trigger: 'change' },
          defectGradeName: { required: true, message: '请选择', trigger: 'change' },
          categoryName: { required: true, message: '请选择', trigger: 'change' },
          positionName: { required: true, message: '请选择', trigger: 'change' },
          reasonName: { required: true, message: '请选择', trigger: 'change' },
          discoverDate: { required: true, message: '请选择', trigger: 'change' },
          rectifDatetime: { required: true, message: '请选择', trigger: 'change' },
          solveWorkareaId: { required: true, message: '请选择', trigger: 'change' },
          defectInfoDesc: { required: true, message: '请输入', trigger: 'blur' }
        }
      },

      // 添加/编辑销号弹框配置
      cancelDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: '',
        dataList: {
          deptTreeList: [],
          directionList: [],
          sourceList: []
        },
        form: {
          id: '',
          unitCodeParams: ''
        },
        rules: {
          seclineId: { required: true, message: '请选择', trigger: 'change' },
          siteId: { required: true, message: '请选择', trigger: 'change' },
          pillarNum: { required: true, message: '请选择', trigger: 'change' },
          discoverPerson: { required: true, message: '请选择', trigger: 'change' },
          discoverSourceTypeId: { required: true, message: '请选择', trigger: 'change' },
          defectTypeName: { required: true, message: '请选择', trigger: 'change' },
          defectGradeName: { required: true, message: '请选择', trigger: 'change' },
          categoryName: { required: true, message: '请选择', trigger: 'change' },
          positionName: { required: true, message: '请选择', trigger: 'change' },
          reasonName: { required: true, message: '请选择', trigger: 'change' },
          discoverDate: { required: true, message: '请选择', trigger: 'change' },
          rectifDatetime: { required: true, message: '请选择', trigger: 'change' },
          solveWorkareaId: { required: true, message: '请选择', trigger: 'change' },
          defectInfoDesc: { required: true, message: '请输入', trigger: 'blur' },
          // defectImagesList: [
          //   { required: true, message: '缺陷照片不能为空', trigger: 'change' }
          // ],
          // retestImagesList: [
          //   { required: true, message: '复测照片不能为空', trigger: 'change' }
          // ],
          // repairImagesList: [
          //   { required: true, message: '修后照片不能为空', trigger: 'change' }
          // ],
          defectReasonName: { required: true, message: '请选择', trigger: 'change' },
          solvePersonal: { required: true, message: '请选择', trigger: 'change' },
          solveMethod: { required: true, message: '请输入', trigger: 'blur' },
          handleWorkareaCode: { required: true, message: '处理工区不能为空', trigger: 'change' },
          solvePerson: { required: true, message: '请选择', trigger: 'change' },
          solveDatetime: { required: true, message: '请选择', trigger: 'change' },
          status: { required: true, message: '销号情况不能为空', trigger: 'change' }
        }
      }
    }
  },
  activated() {
    this.findManageUnitDeptList() // 获取当前登入人可以管理的部门所属单位列表
  },
  deactivated() {
    this.lookDialog.visible = false
    this.dialog.visible = false
    this.cancelDialog.visible = false
  },
  created() {
    this.findManageUnitDeptList() // 获取当前登入人可以管理的部门所属单位列表
  },
  methods: {
    // 导入模板
    beforeUpload(file) {
      const param = new FormData()
      param.append('file', file)
      upload(param).then(response => {
        if (response.data.importStatus === 1) {
          this.notifiySuccess(response.data.prompt)
          this.getListPage()
        } else if (response.data.importStatus === 0) {
          this.notifiyWarning(response.data.prompt)
          this.getListPage()
        } else {
          this.notifiyError(response.data.prompt)
        }
      })
      return false
    },
    // 获取当前登入人可以管理的部门所属单位列表
    findManageUnitDeptList() {
      // 获取当前登入人可以管理的部门所属单位列表
      findManageUnitDeptList().then(response => {
        var resData = response.data
        for (var i in resData) {
          if (!resData[i].itemName) {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        this.unitCodeParams = resData[0].itemName
        this.listQuery.unitCodeParams = resData[0].itemName
        this.filterData['unitDeptCode'].options = response.data
        this.listQuery.unitDeptCode = response.data[0].unitDeptCode
        this.filterData['positionName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
        this.filterData['defectGradeName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
        this.filterData['defectTypeName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
        this.filterData['defectReasonName'].selectTableModel.filterForm.unitCodeParams = this.unitCodeParams
        this.getList() // 加载下拉信息列表
        this.getListPage() // 查询列表信息
      })
    },

    // 下拉数据获取
    getList() {
      this.filterData['deptCode'].options = []
      this.cancelDialog.dataList.deptTreeList = []
      this.filterData['lineId'].options = []
      this.filterData['directionId'].options = []
      this.dialog.dataList.directionList = []
      this.filterData['positionName'].options = []
      this.filterData['positionName'].selectTableModel.total = 0
      this.filterData['defectOriginId'].options = []
      this.dialog.dataList.sourceList = []
      this.filterData['defectGradeName'].options = []
      this.filterData['defectGradeName'].selectTableModel.total = 0
      this.filterData['defectTypeName'].options = []
      this.filterData['defectTypeName'].selectTableModel.total = 0
      this.filterData['defectReasonName'].options = []
      this.filterData['defectReasonName'].selectTableModel.total = 0
      // 获取当前登入人可以管理的部门
      findManageDeptTree({ unitCodeParams: this.unitCodeParams }).then(response => {
        const resData = response.data
        // 控制单位不可选择
        for (const i of resData) {
          if (i.obj.unitFlag === 1) { // unitFlag: 1 为单位
            i['disabled'] = true
          }
        }
        this.filterData['deptCode'].options = resData
        this.cancelDialog.dataList.deptTreeList = resData
      })
      // 查询线路树信息列表
      getSeclineTree({ unitCodeParams: this.unitCodeParams }).then(response => {
        this.filterData['lineId'].options = response.data
      })
      // 查询行别信息列表
      getDirectionList({ unitCodeParams: this.unitCodeParams }).then((response) => {
        this.filterData['directionId'].options = response.data
        this.dialog.dataList.directionList = response.data
      })
      // 查询缺陷部位列表
      getPositionList(this.filterData['positionName'].selectTableModel.filterForm).then((response) => {
        this.filterData['positionName'].options = response.data.records
        this.filterData['positionName'].selectTableModel.total = response.data.total
      })
      // 查询缺陷来源列表
      getSourceList({ unitCodeParams: this.unitCodeParams }).then((response) => {
        this.filterData['defectOriginId'].options = response.data.records
        this.dialog.dataList.sourceList = response.data.records
      })
      // 查询缺陷等级列表
      getGradeList(this.filterData['defectGradeName'].selectTableModel.filterForm).then((response) => {
        this.filterData['defectGradeName'].options = response.data.records
        this.filterData['defectGradeName'].selectTableModel.total = response.data.total
      })
      // 查询缺陷分类列表
      getClassifyList(this.filterData['defectTypeName'].selectTableModel.filterForm).then((response) => {
        this.filterData['defectTypeName'].options = response.data.records
        this.filterData['defectTypeName'].selectTableModel.total = response.data.total
      })
      // 查询缺陷成因列表
      getCauseList(this.filterData['defectReasonName'].selectTableModel.filterForm).then((response) => {
        this.filterData['defectReasonName'].options = response.data.records
        this.filterData['defectReasonName'].selectTableModel.total = response.data.total
      })
    },

    // 查询列表信息
    getListPage() {
      this.tableData.loading = true
      // 处理时间
      // if (this.listQuery.findDate) {
      //   this.listQuery.findStartDate = this.listQuery.findDate[0]
      //   this.listQuery.findEndDate = this.listQuery.findDate[1]
      // } else {
      //   this.listQuery.findStartDate = ''
      //   this.listQuery.findEndDate = ''
      // }
      // if (this.listQuery.handleDate) {
      //   this.listQuery.handleStartDate = this.listQuery.handleDate[0]
      //   this.listQuery.handleEndDate = this.listQuery.handleDate[1]
      // } else {
      //   this.listQuery.handleStartDate = ''
      //   this.listQuery.handleEndDate = ''
      // }
      // 查询列表信息
      getListPage(this.listQuery).then((response) => {
        this.tableData.tableList = response.data.records
        this.tableData.total = response.data.total
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
      // 查询各个统计数
      getCount(this.listQuery).then((response) => {
        this.countData = response.data
      })
    },

    // 搜索
    search() {
      this.listQuery.page = 1
      this.getListPage() // 查询列表信息
    },

    // 查看
    view(row) {
      const dialog = {
        title: '查看缺陷信息',
        visible: true,
        disabled: false,
        loading: false,
        type: 'view',
        dataList: {},
        form: {
          id: row.defectInfoId,
          unitCodeParams: this.unitCodeParams
        }
      }
      this.lookDialog = Object.assign(this.lookDialog, dialog)
    },

    // 新增
    addForm() {
      const dialog = {
        title: '新增缺陷信息',
        visible: true,
        disabled: false,
        loading: false,
        type: 'add',
        dataList: {
          directionList: this.dialog.dataList.directionList,
          sourceList: this.dialog.dataList.sourceList
        },
        form: {
          id: '',
          unitCodeParams: this.unitCodeParams
        }
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },

    // 编辑
    updateForm(row, index) {
      const dialog = {
        title: '编辑缺陷信息',
        visible: true,
        disabled: false,
        loading: false,
        type: 'edit',
        dataList: {
          directionList: this.dialog.dataList.directionList,
          sourceList: this.dialog.dataList.sourceList
        },
        form: {
          id: row.defectInfoId,
          unitCodeParams: this.unitCodeParams
        }
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },

    // 添加或编辑接口
    updateData() {
      this.getListPage() // 查询列表信息
      this.dialog.loading = false
      this.dialog.visible = false
    },

    // 删除信息
    deleteData(row, index) {
      this.confirmBox(`确定删除【${index + 1}】吗?`).then(() => {
        // 删除信息
        deleteData({
          unitCodeParams: this.unitCodeParams,
          id: row.defectInfoId
        }).then(() => {
          this.notifiySuccess('删除成功!')
          this.getListPage() // 查询列表信息
        })
      }).catch(() => {})
    },

    resetSearch() { // 重置
      this.listQuery = {
        page: 1,
        size: 20,
        unitDeptCode: '',
        deptCode: '',
        railType: '',
        lineId: '',
        lineSiteId: '',
        directionId: '',
        trackId: '',
        tunnelId: '',
        pillarNum: '',
        status: '',
        defectPositionId: '',
        positionName: '',
        defectOriginId: '',
        defectLevelId: '',
        defectGradeName: '',
        defectCategoryId: '',
        defectTypeName: '',
        defectReasonId: '',
        defectReasonName: '',
        findDate: [],
        findStartDate: '',
        findEndDate: '',
        handleDate: [],
        handleStartDate: '',
        handleEndDate: '',
        countMessage: '',
        unitCodeParams: ''
      }
      this.tableData.tableList = []
      this.countData = {
        total: 0,
        notReformCount: 0,
        overDateCount: 0,
        reformCount: 0
      }
      this.filterData['lineId'].options = []
      this.filterData['lineSiteId'].options = []
      this.filterData['trackId'].options = []
      this.filterData['tunnelId'].options = []
      // 查询线路树信息列表
      getSeclineTree({ unitCodeParams: this.unitCodeParams }).then(response => {
        this.filterData['lineId'].options = response.data
      })
      this.findManageUnitDeptList() // 获取当前登入人可以管理的部门所属单位列表
    },

    // 销号操作
    handleCancelNumber(row, index) {
      const dialog = {
        title: '编辑销号情况',
        visible: true,
        disabled: false,
        loading: false,
        type: 'cancel',
        dataList: {
          directionList: this.dialog.dataList.directionList,
          sourceList: this.dialog.dataList.sourceList
        },
        form: {
          id: row.defectInfoId,
          unitCodeParams: this.unitCodeParams
        }
      }
      this.cancelDialog = Object.assign(this.cancelDialog, dialog)
    },

    // 销号操作回调
    updateDataOfCancelNumber(formData) {
      this.getListPage() // 查询列表信息
      this.cancelDialog.loading = false
      this.cancelDialog.visible = false
    }
  }
}
</script>

<style lang="scss" scope>
.defect-information .el-table--medium td {
  padding: 0px !important;
}
.defect-information .el-table--border td:first-child .cell {
  padding-left: 0px;
  padding-right: 0px;
}
.remain-color {
  background: #F5F685;
  padding: 5px 10px;
}
.overtime-color {
  background: #F44B53;
  padding: 5px 10px;
}

.JCWWTKInformation {
  .refresh-btn {
    background-color: #3dbed5;
    border: none;
  }
  .refresh-btn:hover {
    background-color: #73cddd;
    border: none;
  }
  .content {
      position: relative;
      background-color: #ffffff;
      padding: 20px 30px;
      .content-header {
        height: 36px;
        display: flex;
        align-items: center;
        .content-header-vertical-bar {
          width: 7px;
          height: 26px;
          background: #409eff;
          border-radius: 4px;
          margin-right: 13px;
        }
        .content-header-title {
          font-size: 28px;
          margin-right: 30px;
        }
        .content-msg {
          width: 162px;
          height: 28px;
          margin-right: 18px;
          line-height: 26px;
          color: #323232;
          font-size: 14px;
          text-align: center;
          background: #F7FBFF;
          border: 1px solid #E3E3E3;
          border-radius: 14px;
          cursor: pointer;
          span {
            color: #F44B53;
            font-size: 16px;
          }
        }
        .content-msg-active {
          width: 162px;
          height: 28px;
          margin-right: 18px;
          line-height: 26px;
          color: #ffffff;
          font-size: 14px;
          text-align: center;
          background: #409EFF;
          border: 1px solid #E3E3E3;
          border-radius: 14px;
          cursor: pointer;
          span {
            color: #ffffff;
            font-size: 16px;
          }
        }
        .operation-btn-div {
          position: absolute;
          right: 28px;
          .operation-btn {
            padding: 10px 20px 10px 20px;
            margin-left: 11px;
            color: #2d6dd4;
            background-color: #e2f0fd;
            border-radius: 4px;
            border: none;
          }
          .operation-btn:hover {
            padding: 10px 20px 10px 20px;
            margin-left: 11px;
            color: #2d6dd4;
            background-color: #b0d1f0;
            border-radius: 4px;
            border: none;
          }
        }
      }
  }
  .el-date-editor .el-range__icon {
    margin-top: -6px;
  }
}
.top-operation {
  display: flex;
  .custom-filter-item {
    display: inline-block;
    margin: 0 6px;
  }
}
</style>
